<template>
    <div class="allcontrol">
        <div style="background-color: #f4f4f4; width: 100%;height: 2000px;">
            <div style="background-color: white;width: 855px;position: absolute;left: 50%;margin-left: -425px;">
                <div style="margin-top: 20px;margin-left: 15px;font-size: 19px;">
                    <span>以下是{{ dep_name }}医生</span>
                </div>
                <div style="margin-top: 30px;">
                    <ul style="list-style-type: none;">
                        <li v-for="items in doctor.doctor_list" style="padding-left: 30px;border-bottom: 1px solid #f6f6f6;padding-right: 30px;padding-top: 15px;padding-bottom: 25px;" class="depdoctororderdetail" @click="toDoctor(items.id)">
                            <img :src="items.avatar" style="width: 50px;border-radius: 50%;">
                            <div style="margin-left: 60px;margin-top: -60px;margin-bottom: 5px;">
                                <span style="font-size: 19px;font-weight: 600;margin-right: 10px;">{{ items.name }}</span><span style="font-size: 14px;vertical-align: middle;margin-right: 10px;">{{ items.title }}</span><span style="background-color: #ebebeb; font-size: 13px;">{{ items.level }}</span>
                            </div>
                            <div style="margin-left: 60px;font-size: 15px;margin-bottom: 5px;">
                                <span style="margin-right: 10px;">{{ items.department }}</span><span>{{ items.hospital }}</span>
                            </div>
                            <div style="margin-left: 60px;font-size: 14px;margin-bottom: 15px;">
                                <span style="margin-right: 10px;">{{ items.star }}分</span><span>{{ items.answer }}个回答</span>
                            </div>
                            <div style="margin-left: 60px;font-size: 17px;">
                                <span>图文 ￥{{ items.price }}</span>
                                <button style="border: 1px solid #00c792; color: #00c792;width: 70px;height: 30px;border-radius: 4px;float: right;background-color: white;" @click="toDoctor(items.id)">问医生</button>
                            </div>
                        </li>
                    </ul>
                </div>
            </div>

        </div>
    </div>
</template>
<script setup>
import {ref,onMounted} from 'vue'
import {ElMessage} from 'element-plus'
import axios from 'axios'
import { useRoute, useRouter } from 'vue-router'
import doctor from "../../api/doctor.js";
const router = useRouter()
const route = useRoute()
let xid=route.query.id
let dep_name=route.query.name

onMounted(()=>{
  doctor.get_doctor_list_by_department(xid)
})


const toDoctor=(id)=>{
  doctor.doctor_id = id
  router.push(`/doctor?id=${id}`)
}
</script>
<style scoped>
.depdoctororderdetail:hover{
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    cursor: pointer;
}
</style>